<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-09 15:15:14
-->
<template>
  <div class="article">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->
    <!-- 体部 -->
         <div class="content" v-loading="loading">
           
           <div class="wrapper">
             <div class="top">
             <img src="/resources/images/top1.png" width="100%" >
             <div class="page_title" >
               {{ article.category.name }}
             </div>
             </div>
             <div class="article_content" >
               <div class="nav">
               <div class="nav1">
                 

               </div>
               <div class="nav2">
               <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>{{article.category.name}}</el-breadcrumb-item>
               <el-breadcrumb-item>正文</el-breadcrumb-item>
               </el-breadcrumb>
               </div>
               </div>
               <div class="title">
                {{article.title}}
               </div>
               <div class="info">
                 发布日期：{{article.publishTime | fmtDate}}
                 点击量：{{article.readTimes}}
               </div>
               <div class="cc" v-html="article.content"></div>
             </div>

           </div>
         </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Foot></Foot>
    <!-- /底部 -->
  </div>
</template>

<script>
import {get} from '../utils/request'
import Head from "./components/Head"
import Foot from "./components/Foot"

export default {
  components:{
    Head,Foot
  },
  data(){
    return{
      id:0,
      article:null,
      loading:false
    }
  },
  created(){
    this.id=this.$route.query.id;
    this.loadArticle();
  },
   methods:{
    loadArticle(){
      this.loading = true;
      let url = '/index/article/findById'
      get(url,{id:this.id}).then(resp => {
        this.article = resp.data;
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color_primary: #028b39;

.content{
   background-color: #f1efe3;
    padding:0;

    .top{
      width: 1200px;
      display: block;
      margin: 0 auto;
      height: 360px;
      .page_title {
      padding: 0;
      font-size: 18px;
      padding: 1em 3em;
      color: #fff;
      position: relative;
      background-color: #297470;
      bottom: 8em;
      width: 130px;
      text-align: center;
    }   
    }
              
        .article_content {
           width: 980px; ;
          display: block;
          margin: 0 auto;
          background-color: #ffffff;
          min-height: 400px;
          border-radius: 5px;
           img{
          width: 100%;
          border-bottom: 8px solid #8c6301; 
            }
          .nav::after{
            display: block;
            content: "";
            clear: both;
            .nav1{
              float: left;
              font-size: 20px;
            }
            .nav2{
              float: right;
              font-size: 20px;
            }
          }
          
       
        .title,.info {
        text-align: center;
        }
        .title {
        font-size:18px;
        font-weight:bold;
        
        line-height: 2em;
        }
        .info {
        padding:0 0 1em;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        margin-bottom: .5em;
      }
        .cc {
        padding: 0 1em;
      }
    }
}
</style>